<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/goodsDetails.css">
    <link rel="stylesheet" href="图标图标/iconfont.css">
</head>
<body>
    <div id="tip">
		<div class="tip_center">
			<div class="tip_left">
				<p>晚上好，找到中意的书了吗?&nbsp;&nbsp;&nbsp;&nbsp;</p>
				<p>请登录&nbsp;&nbsp;</p>
				<p>免费注册</p>
			</div>
			<ul class="tip_right">
				<li class="list">我的学习</li>
				<li class="iconfont icon-wode">个人中心</li>
				<li>我的订单</li>
				<li>客户服务</li>
				<li>手机新华</li>
			</ul>
		</div>
	</div>
	<div id="layout">
		<div class="layout_center">
			<div class="center_top">
				<div class="center_top_left">
					<img src="img/01.jpg" alt="">
				</div>
				<div class="center_top_right">
					<div class="inpt">
						<input type="text" placeholder="论中国共产党历史">
						<button class="iconfont icon-fangdajing"></button>
						<p class="iconfont icon-gouwuche-xuanzhong">&nbsp;&nbsp;购物车&nbsp;&nbsp;<span>1</span>&nbsp;件&nbsp;<span class="iconfont icon-angle-right"></span></p>
					</div>
					<ul>
						<li>热门搜索</li>
						<li>习近平扶贫故事</li>
						<li>北京冬奥会</li>
						<li>日历2021</li>
						<li>诗词名句</li>
						<li>新华英雄笔</li>
					</ul>
				</div>
			</div>
			<ul class="center_bottom">
				<li class="iconfont icon-gengduo-2 list ">&nbsp;&nbsp;全部商品分类
                    <ul class="hide">
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               
                                <ul>
                                    <li class="list">文学</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                        
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               <ul>
                                    <li class="list">热门图书</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                </ul>
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">文学</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               <ul>
                                    <li class="list">热门图书</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                </ul>
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                              
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">文学</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">文学</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               <ul>
                                    <li class="list">热门图书</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                </ul>
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                        <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                         <li><span class="span">文学艺术</span>
                            <span>小说</span>
                            <span>文学</span>
                            <span>艺术</span>
                            <span>传记</span>
                            <div class="div1">
                               <ul>
                                    <li class="list">热门图书</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                </ul>
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">艺术</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    
                                </ul>
                                <ul>
                                    <li class="list">小说</li>
                                    <li>解忧杂货铺</li>
                                    <li>浮生六计</li>
                                    <li>自在独体</li>
                                    <li>摆渡人</li>
                                    <li>三体</li>
                                    <li>围城</li>
                                    
            
                                </ul>
                                <ul>
                                    <li class="list">图书</li>
                                
                                    <li>围城</li>
                                </ul> 
                                
                            </div>
                        </li>
                    </ul>
                    
                </li>
				<li>商城首页</li>
				<li>主题出版</li>
				<li>中班书房</li>
				<li>新华优选</li>
				<li>新华定制</li>
				<li>新华教育</li>
				<li>新华直播</li>
				<li>电子书</li>
				<li>排行版</li>
				<li>新世纪·新经典</li>
			</ul>
        </div>
    </div>
    <div class="text">
       
    </div>
    <div class="wrap">
        <div id="bigWrap">
            <!-- <img id="big" src="img/box1.webp" alt=""> -->
            <div class="shadow"></div>
        </div>
        <div class="show"><img src="img/box1.webp" alt=""></div>
        <div class="wrap_right">
            <p class="p1">中国红色文化丛书革命英雄系列（全9册）</p>
            <p>江西教育出版社编 中国红色文化研究会著 </p>
            <div class="active">
                <div class="div1">
                    <p class="p1"><img src="img/biao.jpg" alt=""> 直降</p>
                    <p class="p2">
                        <span class="one">距离活动结束07天</span>
                        <span class="spa" id="time1" ></span>
                        <span class="spa1">:</span>
                        <span class="spa" id="time2" ></span>
                        <span class="spa1">:</span>

                        <span class="spa" id="time3"></span>
                    </p>
                </div>
                <p class="p1">
                    <span>活动价</span>
                    <span class="money">￥71.00</span>
                    <del>167.00</del>
                </p>
                <p class="p2">
                    <span class="p2_1">优惠劵</span>
                    <span class="p2_2"><img src="img/优惠劵.jpg" alt=""></span>
                    <span class="p2_3">更多优惠</span><span class="iconfont icon-xiangxia"></span>
                </p>
            </div>
            <div class="send">
                <div class="send_1">
                    <span>配送至</span>
                    <select name="" id="province">
                    </select>
                    <select name="" id="city">
                    </select>
                    <select name="" id="area">
                    </select>
                    <span>该地区有货</span>
                </div>
            </div>
            <div class="num">
                <span>数量</span>
                <div>
                   <button class="sub">-</button>
                    <input type="text" class="count" value="0">
                   <button class="add">+</button>
                </div>
            </div>
            <div class="shop">
                <button class="butt1">加入购物车</button>
                <button class="butt2">立即购买</button>
            </div>
        </div>
    </div>

    
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        
        
        
        function goodsDetails(){
            // let  typ=getTypeId()
            // console.log(typeId);
            // 使用jquery发送Ajax请求：第一个是php的地址，第二个是回调函数，如果出现第二个参数，用花括号里面写参数：参数值
            $.get("php_1/getGoodsInfo.php",{"goodsId":getTypeId()},function(data){

                $(function() {
                    // 放大镜
                // let smallWrap=selet("#smallWrap img")
                let big=selet("#big")
                let bigWrap=selet("#bigWrap")
                let shadow=selet(".shadow")
                let showImg=selet(".show img")
                // smallWrap.forEach((item)=>{
                // 	item.onclick=function(){
                // 		big.src=this.src
                // 		showImg.src=this.src
                // 	}
                // })
                
                bigWrap.onmousemove=function(event){
                    //offsetHeight：动态计算阴影盒子高度
                    //offsetWidth：动态计算阴影盒子宽度度
                    // 大图盒子的尺寸
                    let bigBoxw = this.offsetWidth;
                    let bigBoxh = this.offsetHeight;
                    
                    shadow.style.left=event.offsetX-shadow.offsetWidth/2+"px"
                    // console.log(shadow.style.left)
                    shadow.style.top=event.offsetY-shadow.offsetHeight/2+"px"
                    
                    // 判断是否超出边界,用鼠标的位置判断是否为盒子的一半，
                    // 如果是，就让阴影盒子的左右距离都变为0
                    if(event.offsetX<=shadow.offsetWidth/2){
                        shadow.style.left="0px"
                    }
                    if(event.offsetY<=shadow.offsetHeight/2){
                        shadow.style.top="0px"
                    }
                    if(event.offsetY>=bigBoxh-shadow.offsetHeight/2){
                        shadow.style.top=bigBoxh-shadow.offsetHeight + "px"
                    }
                    if(event.offsetX>=bigBoxh-shadow.offsetHeight/2){
                        shadow.style.left=bigBoxh-shadow.offsetHeight + "px"
                        
                    }
                    
                    showImg.style.left=-(parseInt(shadow.style.left) * 3) + "px"
                    // console.log(showImg.style.left)
                    showImg.style.top=-(parseInt(shadow.style.top) * 3) + "px";
                }
                
                selet("#bigWrap").onmouseenter = function(){
                    selet(".shadow").style.display = "block";
                    selet(".show").style.display = "block";
                }
                selet("#bigWrap").onmouseleave = function(){
                    selet(".shadow").style.display = "none";
                    selet(".show").style.display = "none";
                }
                })

                
                $(function(){
                        // 省市区三级联动
                    let cityPicker = {
                        province:selet("#province"),
                        city:selet("#city"),
                        area:selet("#area"),
                        // 更新城市数据
                        updateCity(index){
                            var index = index || 0;
                            this.city.innerHTML = "";
                            citys[index].mallCityList.forEach(item=>{
                                let option = document.createElement("option");
                                option.innerHTML = item.cityName;
                                this.city.appendChild(option)
                            })
                        },
                        // 更新区数据
                        updateArea(provinceIndex,cityIndex){
                            area.innerHTML = "";
                            citys[provinceIndex].mallCityList[cityIndex].mallAreaList.forEach(item=>{
                                let option = document.createElement("option");
                                option.innerHTML = item.areaName;
                                area.appendChild(option)
                            })
                        },
                        // 初始化
                        init(){
                            // 初始化数据
                            citys.forEach(item=>{
                                let option = document.createElement("option");
                                option.innerHTML = item.provinceName;
                                this.province.appendChild(option)
                            })
                            this.updateCity(0)
                            this.updateArea(0,0)
                            // onchange事件当值发生改变的时候触发的事件
                            // 只属于文本框，密码框，文本域与下拉选择菜单
                            // selectedIndex属性：下拉选择菜单的Node节点独有的属性
                            // 代表当前选择的选择项相对于其他选择项所处的下标
                            this.province.onchange = ()=>{
                                this.updateCity(this.province.selectedIndex)
                                this.updateArea(this.province.selectedIndex,this.city.selectedIndex)
                            }
                            this.city.onchange = ()=>{
                                this.updateArea(this.province.selectedIndex,this.city.selectedIndex)
                            }
                        }
                    }
                    
                    cityPicker.init()
                    
                    // 加减
                    let sub=document.getElementsByClassName("sub")[0]
                    let add=document.getElementsByClassName("add")[0]
                    let input=document.getElementsByClassName("count")[0]
                    sub.onclick=function(){
                    input.value = parseInt(input.value) - 1
                    input.value = parseInt(input.value) > 0 ? parseInt(input.value) - 1 : 0;
                    }
                    add.onclick=function(){
                    input.value = parseInt(input.value) + 1
                    }
                    
                    })


               
                data=JSON.parse(data)
                // console.log(data)
                let htmlStr=""
                   htmlStr=`
                   <div id="bigWrap">
            <img id="big" src="${data.beiyong2}" alt=""> 
            <div class="shadow"></div>
        </div>
        <div class="show"><img src="${data.beiyong2}" alt=""></div>
        <div class="wrap_right">
            <p class="p1">${data.goodsDesc}</p>
            <p>江西教育出版社编 中国红色文化研究会著 </p>
            <div class="active">
                <div class="div1">
                    <p class="p1"><img src="img/biao.jpg" alt=""> 直降</p>
                    <p class="p2">
                        <span class="one">距离活动结束07天</span>
                        <span class="spa" id="time1" ></span>
                        <span class="spa1">:</span>
                        <span class="spa" id="time2" ></span>
                        <span class="spa1">:</span>

                        <span class="spa" id="time3"></span>
                    </p>
                </div>
                <p class="p1">
                    <span>活动价</span>
                    <span class="money">￥${data.goodsPrice}</span>
                    <del>￥${data.beiyong1}</del>
                </p>
                <p class="p2">
                    <span class="p2_1">优惠劵</span>
                    <span class="p2_2"><img src="img/优惠劵.jpg" alt=""></span>
                    <span class="p2_3">更多优惠</span><span class="iconfont icon-xiangxia"></span>
                </p>
            </div>
            <div class="send">
                <div class="send_1">
                    <span>配送至</span>
                    <select name="" id="province">
                    </select>
                    <select name="" id="city">
                    </select>
                    <select name="" id="area">
                    </select>
                    <span>该地区有货</span>
                </div>
            </div>
            <div class="num">
                <span>数量</span>
                <div>
                   <button class="sub">-</button>
                    <input type="text" class="count" value="1">
                   <button class="add">+</button>
                </div>
            </div>
            <div class="shop">
                <a href="shopCar.html?goodsId=${data.goodsId}" ><button class="butt1" onclick="shop()" >加入购物车</button></a>
                <button class="butt2">立即购买</button>
            </div>
        </div>
                   `
                   $(".wrap").html(htmlStr) 
               });

               

        }
        goodsDetails()

        function getgoodsId(){
            return location.search.split("=")[1]//typeId=001
            // return 1;
        }
        function getTypeId(){
            return location.search.split("=")[1]//typeId=001
            // return 1;
        }
    </script>
    <script src="js/machine.js"></script>

    <script src="js/citys.js"></script>
    <script src="js/goodsDetails.js"></script>
    <script src="js/cookieTools.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>

    function shop(){
        $.post("php_1/addShoppingCart.php",
        {"vipName":getCookie("iphone"),
        "goodsId":getgoodsId(),
        "goodsCount":$(".count").val()},
        function(data){
            // data=JSON.parse(data)
            console.log(data);
            //
        })
    }
  
    </script>
</body>
</html>